<template>
  <div class="container7">
    <el-card class="boxszing-card">
      <el-row type="flex" justify="space-between">
        <el-col>
          <div class="complete">说明：目前支持学科和关键字条件筛选</div>
        </el-col>
        <el-row type="flex" justify="end" style="margin-bottom: 15px">
          <el-col>
            <el-button type="success" @click="$router.push('new')">
              <i class="el-icon-edit"></i>
              新增试题
            </el-button>
          </el-col>
        </el-row>
      </el-row>
      <!--  第一行 biandanyangshi -->
      <el-form :model="formDate" ref="formDate">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="学科" prop="x" label-width="80px">
              <el-select
                v-model="formDate.x"
                placeholder="请选择"
                style="width: 240px"
                @focus="getSubjects"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in subjects"
                  :key="index"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" prop="e" label-width="80px">
              <el-select
                v-model="formDate.e"
                placeholder="请选择"
                style="width: 240px"
              >
                <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" prop="b" label-width="80px">
              <el-select
                v-model="formDate.b"
                placeholder="请选择"
                style="width: 240px"
              >
                <!-- <el-option label="区域一" value="shanghai"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" prop="g" label-width="80px">
              <el-input
                v-model="formDate.g"
                placeholder="根据题干搜索"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行选框 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item prop="s" label="试题类型" label-width="80px">
              <el-select
                v-model="formDate.s"
                placeholder="请选择"
                style="width: 240px"
                @focus="getType"
              >
                <el-option
                  v-for="item in testType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item prop="n" label="难度" label-width="80px">
              <el-select
                v-model="formDate.n"
                placeholder="请选择"
                style="width: 240px"
                @focus="getdiffcult"
              >
                <el-option
                  v-for="item in diffcult"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" label-width="80px" prop="f">
              <el-select
                v-model="formDate.f"
                placeholder="请选择"
                style="width: 240px"
                @focus="getdirections"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" label-width="80px" prop="manager">
              <el-select v-model="formDate.manager" placeholder="请选择">
                <el-option label="超级管理员" value="超级管理员"></el-option>
                <el-option label="录入管理员" value="录入管理员"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第三行选框 -->
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="题目备注" label-width="80px" prop="t">
              <el-input v-model="formDate.t" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" label-width="80px" prop="q">
              <el-input v-model="formDate.q" style="width: 240px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" prop="province" label-width="80px">
              <el-row type="flex" justify="space-between">
                <el-col>
                  <el-select
                    style="width: 120px"
                    v-model="formDate.province"
                    @focus="chengshiClick"
                    @change="chengshichange"
                  >
                    <el-option
                      v-for="(item, index) in provinceList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col>
                  <el-select
                    style="width: 120px"
                    v-model="formDate.citys"
                    @focus="cityClick"
                  >
                    <el-option
                      v-for="(item, index) in cityList"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option
                  ></el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row type="flex" justify="end">
              <el-button @click="resetForm('formDate')">清除</el-button>
              <el-button type="primary" @click="search">搜索</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!--四个小模块-->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="all"></el-tab-pane>
        <el-tab-pane label="待审核" name="pending"></el-tab-pane>
        <el-tab-pane label="已审核" name="confirm"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="refuse"></el-tab-pane>
      </el-tabs>
      <!-- alert警告提示 -->
      <el-alert type="info" show-icon style="margin-bottom: 20px">
        数据一共{{ allList.length }}条
      </el-alert>
      <!-- 筛选出来的样式列表 -->
      <!-- 1.固定表格头部样式开始 -->
      <el-table :data="allList" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="180">
        </el-table-column>
        <el-table-column prop="subject" label="学科" width="150">
        </el-table-column>
        <el-table-column prop="catalog" label="目录" width="150">
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="120">
        </el-table-column>
        <el-table-column label="题干" width="420">
          <template slot-scope="{ row }">
            <p v-html="row.question"></p>
          </template>
        </el-table-column>
        <el-table-column label="录入时间" width="230">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="100">
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="150">
        </el-table-column>
        <el-table-column prop="chkState" label="审核状态" width="120">
        </el-table-column>
        <el-table-column prop="chkRemarks" label="审核意见" width="120">
        </el-table-column>
        <el-table-column prop="chkUser" label="审核人" width="150">
        </el-table-column>
        <el-table-column prop="publishState" label="发布状态" width="150">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="240">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="watchList(scope.row)"
              >预览</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="chkStateChange(scope.row)"
              :class="{
                active:
                  scope.row.chkState !== '待审核' || scope.row.chkState === 0,
              }"
              :disabled="
                scope.row.chkState === '通过' || scope.row.chkState === '拒绝'
              "
              >审核</el-button
            >
            <el-button type="text" size="small">修改</el-button>
            <el-button
              type="text"
              size="small"
              @click="publishStateChange(scope.row)"
              >{{
                scope.row.publishState === "待发布" ||
                scope.row.publishState === "已下架"
                  ? "上架"
                  : "下架"
              }}</el-button
            >
            <el-button type="text" size="small" @click="deletelist(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 1.固定表格样式结束 -->
      <!-- 分页开始 -->
      <el-row class="page">
        <el-col :span="12" :offset="12">
          <el-pagination
            align="right"
            background
            :total="page.total"
            :current-page="page.page"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 15, 20]"
            layout="prev,pager,next,sizes,jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
      <!-- 分页结束 -->
    </el-card>
    <!-- 第一个按钮 预览弹窗 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="70%"
      @close="handleClose"
    >
      <!-- 第一行 -->
      <el-row type="flex" justify="space-around">
        <el-col>
          <span>【题型】: {{ form1.name }}</span>
        </el-col>
        <el-col
          ><span>【编号】: {{ form1.code }}</span></el-col
        >
        <el-col
          ><span>【难度】: {{ form1.diffcult }}</span></el-col
        >
        <el-col
          ><span>【标签】: {{ form1.tag }}</span></el-col
        >
      </el-row>
      <!-- 第二行 -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 24px; margin-bottom: 20px"
      >
        <el-col>
          <span>【学科】: {{ form1.xueke }}</span>
        </el-col>
        <el-col
          ><span>【目录】: {{ form1.mulu }}</span></el-col
        >
        <el-col
          ><span>【方向】: {{ form1.fangxiang }}</span></el-col
        >
        <el-col><span style="display: none">【标签】:</span></el-col>
      </el-row>
      <hr />
      <!-- 第三行 -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 24px; margin-bottom: 20px"
      >
        <el-col>
          <span>【题干】:</span>
          <p v-html="form1.question" style="color: blue; font-size: 16px"></p>
          <p>{{ form1.type }}题 选项:（以下选中的选项为正确答案）</p>
          <p v-html="form1.answer"></p>
        </el-col>
      </el-row>
      <!-- 弹层题目选项 -->
      <hr />
      <!-- 参考答案 -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 24px; margin-bottom: 20px"
      >
        <el-col>
          <span style="padding-right: 20px">【参考答案】:</span>
          <el-button type="danger" @click="showVideo = true"
            >视频答案预览</el-button
          >
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col v-if="showVideo">
          <video
            :src="form1.move"
            class="videoItem"
            autoplay="autoplay"
            controls="controls"
            muted
            loop
          ></video>
        </el-col>
      </el-row>
      <hr />
      <!-- 答案解析 -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 24px; margin-bottom: 20px"
      >
        <el-col>
          <span style="padding-right: 20px"
            >【答案解析】: {{ form1.jiexi }} 有答案</span
          >
        </el-col>
      </el-row>
      <hr />
      <!-- 题目备注 -->
      <el-row
        type="flex"
        justify="space-around"
        style="margin-top: 24px; margin-bottom: 20px"
      >
        <el-col>
          <span style="padding-right: 20px"
            >【题目备注】: {{ form1.beizhu }} 有答案</span
          >
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核弹窗组件 -->
    <questions-check
      :chkStatedialog.sync="chkStatedialog"
      @btnConfirm="getAllList"
      :list="allList"
      ref="check"
    ></questions-check>
  </div>
</template>
<script>
import {
  provinces as getProvinces,
  citys as getCitys,
} from "@/api/hmmm/citys.js";
import { simple } from "@/api/hmmm/subjects";
import { choice, choiceAdd, choicePublish } from "@/api/hmmm/questions";
import {
  difficulty,
  questionType,
  direction,
  chkType,
  publishType,
} from "@/api/hmmm/constants";
import QuestionsCheck from "@/module-hmmm/components/questions-check.vue";
export default {
  name: "Question",
  data() {
    return {
      toEdit(row) {
        this.$router.push({
          path: "new",
          query: {
            id: row.id,
          },
        });
      },
      activeName: "all",
      currentPage3: 1,
      subjects: [], // 学科
      testType: [], // 试题类型
      diffcult: [], // 难度
      direction: [], // 方向
      citys: [], // 二级城市
      currentPage: 1,
      dialogVisible: false,
      form1: {
        // 弹窗表单数据
        name: "",
        code: "",
        diffcult: "",
        tag: "",
        xueke: "",
        mulu: [],
        fangxiang: "",
        title: "",
        type: "",
        question: "",
        move: "",
        jiexi: "",
        beizhu: "",
      },
      formDate: {
        x: "",
        e: "",
        b: "",
        g: "",
        s: "",
        n: "",
        f: "",
        t: "",
        q: "",
        manager: "",
        province: "",
        citys: "",
      },
      page: {
        page: 1,
        pagesize: 1,
        total: 5,
      },
      showVideo: false,
      provinceList: [],
      cityList: [],
      allList: [], // 表格列表
      currentchengshi: "",
      subjectId: null,
      chkStatedialog: false, // 审核弹层
    };
  },
  components: {
    QuestionsCheck,
  },
  created() {
    this.getAllList();
    this.updata();
  },
  methods: {
    // 获取学科列表
    async getSubjects() {
      const { data } = await simple();
      this.subjects = data;
    },
    // 获取难度
    getdiffcult() {
      this.diffcult = difficulty;
    },
    // 获取类型
    getType() {
      this.testType = questionType;
    },
    // 获取方向
    getdirections() {
      this.direction = direction;
      // console.log(this.direction)
    },
    // 获取城市
    chengshiClick() {
      this.provinceList = getProvinces();
    },
    // 当城市切换变化时
    chengshichange(value) {
      // console.log(value) // 拿到变化的城市名
      this.currentchengshi = value;
      this.formDate.citys = "";
      // console.log(this.currentchengshi);
    },
    // 点击二级城市
    async cityClick() {
      this.cityList = await getCitys(this.currentchengshi);
    },

    // 清除重置表单数据
    resetForm() {
      this.formDate = {
        x: "",
        e: "",
        b: "",
        g: "",
        s: "",
        n: "",
        f: "",
        t: "",
        q: "",
        manager: "",
        province: "",
        citys: "",
      };
      this.getAllList();
    },
    handleSizeChange(val) {
      this.page.pagesize = val;
      this.getAllList();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getAllList();
      console.log(`当前页: ${val}`);
    },

    async getAllList() {
      const { data } = await choice();
      this.allList = data.items;
      this.page.total = data.counts;
      this.updata();

      // console.log(this.countLength)
    },
    updata() {
      this.allList.forEach((item) => {
        // console.log(item)
        difficulty.forEach((obj) => {
          if (obj.value.toString() === item.difficulty) {
            item.difficulty = obj.label;
          }
        });
        questionType.forEach((obj) => {
          if (obj.value.toString() === item.questionType) {
            item.questionType = obj.label;
          }
        });
        chkType.forEach((obj) => {
          if (obj.value === item.chkState) {
            item.chkState = obj.label;
          }
        });
        publishType.forEach((obj) => {
          if (obj.value === item.publishState || item.publishState === 0) {
            item.publishState = obj.label;
          }
        });
      });
    },
    async handleClick(tab, event) {
      if (tab.name === "all") {
        const { data } = await choice();
        this.allList = data.items;
        // console.log(data)
      } else if (tab.name === "pending") {
        // 当切换到待审核时候
        const { data } = await choice({
          chkState: 1,
        });
        this.allList = data.items;
      } else if (tab.name === "confirm") {
        // 当切换到已审核时
        const { data } = await choice({
          chkState: 2,
        });
        this.allList = data.items;
      } else {
        // 当切换到已审核时
        const { data } = await choice({
          chkState: 0,
        });
        this.allList = data.items;
      }
      this.updata();
    },
    // 点击删除
    deletelist(item) {
      this.$confirm("此操作将永久删除该题目，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
          choiceAdd({
            id: item.id,
            choiceState: 0,
          });
          this.getAllList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    // 上下架
    async publishStateChange(data) {
      try {
        await this.$confirm(
          `您确定${
            data.publishState === "待发布" || data.publishState === "已下架"
              ? "上架"
              : "下架"
          }这道题目吗`,
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );
        if (data.publishState === "待发布") {
          this.id1 = "已发布";
        } else {
          this.id1 = "已下架";
        }
        await choicePublish({ publishState: this.id1, id: data.id });
        // console.log(res)
        this.$message.success(
          `${
            data.publishState === "待发布" || data.publishState === "已下架"
              ? "上架"
              : "下架"
          }成功!`
        );
        this.getAllList();
      } catch (error) {
        console.log(error);
      }
    },
    watchList(data) {
      this.dialogVisible = true;
      // console.log(data)// 当前文档数据
      this.form1 = data;
      this.form1.name = this.form1.questionType;
      this.form1.code = this.form1.id;
      this.form1.diffcult = this.form1.difficulty;
      this.form1.tag = this.form1.tags;
      this.form1.xueke = this.form1.subject;
      this.form1.mulu = this.form1.catalog;
      this.form1.fangxiang = this.form1.direction;
      this.form1.title = this.form1.question;
      this.form1.type = this.form1.questionType;
      this.form1.question = this.form1.answer;
      this.form1.move = this.form1.videoURL;
      this.form1.jiexi = this.form1.remarks;
      this.form1.beizhu = this.form1.remarks;
    },
    // sousuo
    async search() {
      const res = await choice({
        subjectID: this.formDate.x,
        keyword: this.formDate.g,
      });
      console.log(res);
      this.allList = res.data.items;
      this.updata();
    },
    // 审核弹窗
    chkStateChange(value) {
      this.chkStatedialog = true; // 点击打开弹层
      this.$refs.check.getid(value.id); // 组件获取实例上的方法 拿到id
    },
    handleClose() {
      this.showVideo = false;
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.container7 {
  margin: 10px;
}
.complete {
  font-size: 13px;
  color: pink;
  padding-bottom: 30px;
}
::v-deep .el-form-item__label {
  font-family: "微软雅黑";
  font-weight: light;
  font-size: 16px;
}
::v-deep .cell {
  font-size: 16px;
}
::v-deep.el-button--text span {
  font-size: 13px;
}
::v-deep .el-pagination__jump {
  margin-left: 0;
}
.el-table {
  margin-bottom: 20px;
}
.active {
  color: rgb(168, 168, 168);
}
.videoItem {
  width: 50%;
}
</style>
